<!DOCTYPE html>
<html lang="en">
<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>VUe-elementUI-Form 表单</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <!-- 引入样式 -->
    <!-- 引入ETementUI样式 -->
    <link rel="stylesheet"href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://ynpkg.com/vue/dist/vue.js"></script>
    <!-- 引入ETementUI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>

<body class="hold-transition">
<div id="app">
    <!-- rules :定义校验规则 -->
    <el-form ref="form" :model="form"  :rules="rules" label-width="80px">
        <!-- prop  rules :定义校验规则 -->
        <el-form-item label="个人信息" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
        <el-form-item label="性别">
            <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="男" value="shanghai"></el-option>
                <el-option label="女" value="beijing"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="出生日期">
            <el-col :span="11">
                <el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
                <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>
            </el-col>
        </el-form-item>
        <el-form-item label="即时配送">
            <el-switch v-model="form.delivery"></el-switch>
        </el-form-item>
        <el-form-item label="活动性质">
            <el-checkbox-group v-model="form.type">
                <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
                <el-checkbox label="地推活动" name="type"></el-checkbox>
                <el-checkbox label="线下主题活动" name="type"></el-checkbox>
                <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
        </el-form-item>
        <el-form-item label="特殊资源">
            <el-radio-group v-model="form.resource">
                <el-radio label="线上品牌商赞助"></el-radio>
                <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
        </el-form-item>
        <el-form-item label="活动形式">
            <el-input type="textarea" v-model="form.desc"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">立即创建</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>

</div>

</body>

<!-- 引入组件库 -->

<script src="../js/vue.js"></script>

<script src="../plugins/elementui/index.js"></script>

<script type="text/javascript" src="../js/jquery.min.js"></script>

<script src="../js/axios-0.18.0.js"></script>

<script>
    var vue = new Vue({
        el: '#app',
        data:{
            form: {
                name: '',
                region: '',
                date1: '',
                date2: '',
                delivery: false,
                type: [],
                resource: '',
                desc: ''
                },
            //定义校验规则
                rules: {
                     name: [
                         {required: true, message: '请输入活动名称', trigger: 'blur'},
                          {min: 3, max: 5, message: '长度在3到5个字符', trigger: 'blur'}

                     ],
                     region: [
                           {required: true, message: '请选择活动区域', trigger: 'change'}
                     ]
                }



          /*  dataList: [],//当前页要展示的列表数据
            dialogFormVisible: false,//添加表单是否可见
            dialogFormVisible4Edit:false,//编辑表单是否可见
            formData: {},//表单数据
            rules: {//校验规则
                type: [{ required: true, message: '图书类别为必填项', trigger: 'blur' }],
                name: [{ required: true, message: '图书名称为必填项', trigger: 'blur' }]
            },
            pagination: {//分页相关模型数据
                currentPage: 1,//当前页码
                pageSize:10,//每页显示的记录数
                total:0,//总记录数
                type: "",
                name: "",
                description: ""
            }   */
        },

        //钩子函数，VUE对象初始化完成后自动执行
       /* created() {
            this.getAll();

        },
*/

        methods: {

            onSubmit() {
                console.log(this.form);
                //validate：对整个表单进行校验的方法，参数为一个回调函数。
                //该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。
                this.$refs['form'].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            }
            //列表
            /*     getAll() {
                     //发送异步请求
                     axios.get("/books").then((res) => {
                         console.log(res.data);
                         this.dataList = res.data.data;        //列表功能
                     })
                 },*/
            //分页查询
       /*     getAll() {
                //组织参数，拼接url请求地址
                //
                // param="?query"
                param = "?type="+this.pagination.type;
                param +="&name="+this.pagination.name;
                param +="&description="+this.pagination.description;
                // console.log(param);

                //发送异步请求
                axios.get("/books/"+this.pagination.currentPage+"/"+this.pagination.pageSize+param).then((res)=>{
                    this.pagination.pageSize = res.data.data.size;
                    this.pagination.currentPage = res.data.data.current;
                    this.pagination.total = res.data.data.total;

                    this.dataList = res.data.data.records;
                });
            },
            //切换页码
            handleCurrentChange(currentPage) {
                //修改页码为当前页码值
                this.pagination.currentPage = currentPage;
                //执行查询
                this.getAll();
            },

            //弹出添加窗口
            handleCreate() {
                this.dialogFormVisible = true
                this.resetForm ();
            },

            //重置表单
            resetForm() {
                this.formData = {};
            },

            //添加
            handleAdd() {
                //发送异步请求
                axios.post("/books", this.formData).then((res) => {
                    if (res.data.flag) { //判断当前操作是否成功
                        //1.关闭弹层
                        this.dialogFormVisible = false;
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.error(res.data.msg);
                    }
                }).finally(() => {
                    //2.重新加载数据
                    this.getAll();
                });
            },

            //取消
            cancel() {
                this.dialogFormVisible = false;
                this.dialogFormVisible4Edit = false;
                this.$message.success("操作取消！");
            },
            // 删除
            handleDelete(row) {
                /!*axios.delete("/books/"+row.id).then((res) => {
                    if (res.data.flag) {//判断当前操作是否成功
                        this.$message.success("删除成功！");
                    } else {
                        this.$message.error("删除失败");
                    }
                }).finally(()=> {
                    //2.重新加载数据
                    this.getAll();
                });*!/
                this.$confirm("次操作永久删除，是否继续？", "提示", {   //confirm  防手抖
                    type: "info"
                }).then((res) => {
                    axios.delete("/books/" + row.id).then((res) => {
                        //console.log("success!")
                        if (res.data.msg==='success') { //判断当前操作是否成功
                            this.$message.success("删除成功！");
                        } else {
                            this.$message.error("数据同步失败,自动刷新");
                        }
                    }).finally(() => {
                        //2.重新加载数据
                        this.getAll();
                    });
                }).catch(() => {
                    this.$message.info("取消操作");
                });
            },

            //弹出编辑窗口
            handleUpdate(row) {
                //发送异步请求
                axios.get("/books/" + row.id).then((res) => {
                    //判断当前操作是否成功

                    if (res.data.msg === 'success' && res.data.data != null) {

                        this.dialogFormVisible4Edit = true;
                        this.formData = res.data.data;
                    } else {
                        this.$message.error("数据同步失败,自动刷新");
                    }
                }).finally(() => {
                    //2.重新加载数据
                    this.getAll();
                });
            },

            //修改
            handleEdit() {
                //发送异步请求
                axios.put("/books", this.formData).then((res) => {
                    console.log(res.data.msg)
                    if (res.data.msg === 'success') { //判断当前操作是否成功
                        //1.关闭弹层
                        this.dialogFormVisible4Edit = false;
                        this.$message.success("修改成功！");
                    } else {
                        this.$message.error("修改失败");
                    }
                }).finally(() => {
                    //2.重新加载数据
                    this.getAll();
                });
            },



            //条件查询*/
        }
    })
</script>

</html>